<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-18 10:06:49
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-02-02 10:43:20
 * @FilePath: \mobile\src\pages\DetailPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <van-nav-bar title="商品" left-text="返回" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="ellipsis" size="22" />
            </template>
        </van-nav-bar>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="item in picimg" :key="item">
                <img v-lazy="item" class="swipeImg" />
            </van-swipe-item>
        </van-swipe>
        <div class="van-multi-ellipsis--l3 proname">
            {{ proname }}
        </div>
        <div class="price">￥{{ price }}</div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" to="/car" />
            <van-action-bar-button type="warning" text="加入购物车" @click="onincCar" />
            <van-action-bar-button type="danger" text="立即购买" to="/car" />
        </van-action-bar>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { showToast } from 'vant';
import { ref, reactive, onMounted } from 'vue'
import { getDetail, carData } from '../services'
import { useCarStore } from '../stores/carStore'

//使用route
const route = useRoute()

//获取数据
const picList = reactive({ pic: [] } as any)
//图片数据
let picimg = ref([] as any)
//商品名称
let proname = ref('');
//商品价格
let price = ref('')
//商品详情
let desc = ref('')
onMounted(async () => {
    const { data } = await getDetail(route.query.id)
    picList.pic.push(data.data)
    //图片数据
    for (let i = 1; i <= 4; i++) {
        let img = 'img' + i
        picimg.value.push(picList.pic[0][img]);
    }
    //商品名称
    proname.value = picList.pic[0].proname
    //商品价格
    price.value = picList.pic[0].originprice
    //商品详情
    desc.value = picList.pic[0].desc

})

//加入购物车
const onincCar = async () => {
    const { data } = await carData(route.query.id)
    showToast(data.message)
    //成功后添加到id pinia中
    const { carList, carListPush } = useCarStore()
    if (carList.includes(route.query.id)) {
        data.data++
    } else {
        carListPush(route.query.id)
    }
}

//返回上一级
const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>
.van-swipe {

    .van-swipe-item {

        .swipeImg {
            width: 100%;
            height: 400px;
            display: block;
        }
    }

}

.proname {
    margin-top: 10px;
}

.price {
    margin-top: 10px;
    color: red;
}
</style>